<template>
    <mrc_ess_MyDrawer :order="props.order" :width="props.width" ref="drawerRef" :cancelText="cancelText" :confirmText="confirmText"
        :title="title" :absolute="props.absolute" :scrim="props.scrim" :autoCancel="false" :autoClose="false"
        @close="handleClose" @confirm="handleConfirm" @cancel="handleCancel" @loading="handleLoading"
        @btnLoading="handleBtnLoading" :isShowBottom="formType != 'view'">
        <!-- 标题前 左右按钮 -->
        <template v-slot:title-prepend>
            <div class="flex align-center" v-if="formType == 'view'">
                <!-- 上一个 -->
                <v-btn class="w-[32px] !min-w-[32px] h-[32px] mr-1" @click="handlePre()" :disabled="btnDisabled">
                    <svg-icon iconClass="arrow-left" size="24"></svg-icon>
                </v-btn>
                <!-- 下一个 -->
                <v-btn class="w-[32px] !min-w-[32px] h-[32px] mr-1" @click="handleNext()" :disabled="btnDisabled">
                    <svg-icon iconClass="arrow-right" size="24"></svg-icon>
                </v-btn>
            </div>
        </template>
        <!-- 编辑/删除按钮 -->
        <template v-slot:title-right>
            <div class="flex align-center" v-if="formType != 'add'">
                <!-- 编辑 -->
                <v-btn variant="flat" color="secondary" class="w-[32px] !min-w-[32px] h-[32px] ml-2"
                    @click="handleEdit()" v-if="formType != 'edit'" :disabled="btnDisabled">
                    <svg-icon iconClass="pencil-white" size="20"></svg-icon>
                </v-btn>
                <!-- 删除 -->
                <mrc_ess_PopConfirm content="Are you sure to delete?" :autoClose="false" @confirm="handleDel">
                    <template v-slot:btn>
                        <v-btn variant="flat" color="error" class="w-[32px] !min-w-[32px] h-[32px] ml-2" :disabled="btnDisabled">
                            <svg-icon iconClass="delete-white" size="20"></svg-icon>
                        </v-btn>
                    </template>
                </mrc_ess_PopConfirm>
            </div>
        </template>
        <!-- 主内容 -->
        <template v-slot:default>
            <!-- 有步骤条的页面 -->
            <mrc_ess_Stepper v-model="stepperValue" :items="props.stepperItems"
                :type="formType == 'add' ? 'default' : 'tabs'"
                v-if="props.stepper && props.stepperItems && props.stepperItems.length">
                <template v-slot:[`${item.value}-content`] v-for="item in props.stepperItems" :key="item.value">
                    <div class="my-edit-form pa-6 h-full scroll_content_y">
                        <slot :name="item.value + '-content'"></slot>
                    </div>
                </template>
            </mrc_ess_Stepper>
            <!-- 普通页面 -->
            <div class="my-edit-form pa-6" v-else>
                <slot name="default"></slot>
            </div>
        </template>
    </mrc_ess_MyDrawer>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick, inject, watch } from 'vue';
import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;

const emit = defineEmits(["pre", "next", "del", "edit", "confirm"]);
const props = defineProps({
    width: {
        type: [Number, String],
        default: 900
    },
    scrim: {
        type: [String, Boolean],
        default: "white"
    },
    absolute: {
        type: Boolean,
        default: false
    },
    order: {
        type: [Number, String]
    },
    // 新增的标题
    addTitle: {
        type: String,
        default: ""
    },
    // 编辑的标题
    editTitle: {
        type: String,
        default: ""
    },
    // 查看的标题
    viewTitle: {
        type: String,
        default: ""
    },
    // 步骤条
    stepper: {
        type: Boolean,
        default: false
    },
    // 步骤条
    stepperItems: {
        type: Array,
        default: () => [{
            title: "title_general",
            label: "01",
            value: 0
        }, {
            title: "title_settings",
            label: "02",
            value: 1
        }]
    }
})

// 取消按钮文案
const cancelText = ref('btn_cancel');
// 确定按钮文案
const confirmText = ref('btn_save');

// 当前步骤条值
const stepperValue = ref(0);

const drawerRef = ref<any>(null);
const formType = defineModel("formType", {
    type: String,
    default: "add"
});
const title = ref("");
// 表单类型发生变化
watch(formType, (val) => {
    if (val == "add") {
        title.value = props.addTitle || "title_new";
    } else if (val == "edit") {
        title.value = props.editTitle || "title_edit";
    } else if (val == "view") {
        title.value = props.viewTitle || "title_view";
    }
    changeBtnText();
}, {
    immediate: true
})
// 步骤条值发生变化
watch(stepperValue, (val) => {
    changeBtnText();
}, {
    immediate: true
})
/**
 * 改变按钮文字
 */
function changeBtnText() {
    if (formType.value == "add" && props.stepper && props.stepperItems && props.stepperItems.length) {
        // 判断是否是最后一个步骤
        if (stepperValue.value == props.stepperItems.length - 1) {
            confirmText.value = proxy.$t('btn_submit');
        } else {
            confirmText.value = proxy.$t('btn_next');
        }
        if (stepperValue.value == 0) {
            cancelText.value = proxy.$t('btn_cancel');
        } else {
            cancelText.value = proxy.$t('btn_previous');
        }
    } else {
        cancelText.value = proxy.$t('btn_cancel');
        confirmText.value = proxy.$t('btn_save');
    }
}
// 按钮是否禁用
const btnDisabled = ref(false);
/**
 * 加载中
 */
function handleLoading(isLoading: boolean) {
    btnDisabled.value = isLoading;
}
/**
 * 加载中
 */
function handleBtnLoading(isLoading: boolean) {
    btnDisabled.value = isLoading;
}
/**
 * 修改按钮不可用状态
 */
function triggerBtnDisabled(flag:boolean) {
    btnDisabled.value = flag;
    drawerRef.value.triggerBtnDisabled(flag);
}
/**
 * 点击上一个
 */
function handlePre() {
    emit("pre");
}
/**
 * 点击下一个
 */
function handleNext() {
    emit("next");
}
/**
 * 点击编辑
 */
function handleEdit() {
    emit("edit");
    formType.value = "edit";
}
/**
 * 点击删除
 */
function handleDel(e:any) {
    emit("del", e);
}
/**
 * 点击保存
 */
async function handleConfirm(e: any) {
    // 有步骤条
    if (formType.value == "add" && props.stepper && props.stepperItems && props.stepperItems.length) {
        // 判断是否是最后一个步骤
        if (stepperValue.value == props.stepperItems.length - 1) {
            emit("confirm", e);
        } else {
            stepperValue.value++;
        }
    } else {
        emit("confirm", e);
    }
}
/**
 * 点击取消
 */
function handleCancel() {
    if (formType.value == "add") {
        if (props.stepper && props.stepperItems && props.stepperItems.length) {
            if (stepperValue.value <= 0) {
                close();
            } else {
                stepperValue.value--;
            }
        } else {
            close();
        }
    } else {
        formType.value = "view";
    }
}
/**
 * 关闭对话框后
 */
function handleClose() {
    // 步骤条值为0
    stepperValue.value = 0;
    // 按钮不可用状态恢复
    btnDisabled.value = false;
}
/**
 * 关闭对话框
 */
function close() {
    drawerRef.value.close();
}
/**
 * 显示对话框
 */
function open(data: any) {
    if (data.type) {
        formType.value = data.type;
    }
    drawerRef.value.open();
}
/**
 * 展示loading
 */
function showLoading() {
    drawerRef.value.showLoading();
}
/**
 * 关闭loading
 */
function hideLoading() {
    drawerRef.value.hideLoading();
}
defineExpose({
    close,
    open,
    showLoading,
    hideLoading,
    triggerBtnDisabled
})
</script>

<style scoped>

</style>